<template>
   <div>
      <!-- 面包屑导航 -->
      <el-breadcrumb separator="/">
         <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
         <el-breadcrumb-item><a href="/">角色管理</a></el-breadcrumb-item>
      </el-breadcrumb>

      <!-- 添加按钮 -->
      <el-button class="btn" type="primary" @click="add">添加</el-button>

      <!-- 表格主体 -->
      <v-list @edit="edit"></v-list>

      <!-- Dialog弹窗 -->
      <v-dialog ref="diaLog" :is="is"></v-dialog>
   </div>
</template>


<script lang='ts' setup>
//引入表格组件
import vList from "./list.vue";
//引入Dialog弹窗 页面
import vDialog from "./dialog.vue";
//引入数据响应功能 ref->简单数据类型的响应
import { reactive, ref } from "vue";

//================数据=================
//设置Dialog弹窗的ref
const diaLog = ref();

//用来显示dialog弹窗的值
let is = reactive({
   isShow: false,
   isAdd: true,
});

//================事件=================
//点击添加按钮 显示弹窗
const add = () => {
   is.isShow = true;
};
//编辑事件  利用子组件实例 传输数据
const edit = (uid: any) => {
   //打开弹窗
   is.isShow = true;
   //改变状态为编辑
   is.isAdd = false;
   //调用子组件实例上的方法 
   diaLog.value.lookup(uid);
}
</script>


<style lang='less' scoped>
// 添加按钮
.btn {
   margin: 15px 0;
}
</style>